<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.uid" clearable placeholder="通过用户id查询" style="width: 200px;" class="filter-item"
        @keyup.enter.native="toQuery" />
      <el-select v-model="query.wayReceiving" clearable placeholder="领取方式" class="filter-item" filterable
        style="width: 130px">
        <el-option v-for="item in optionsMetaShow" :disabled="item.disabled === 0" :value="item.id" :key="item.id"
          :label="item.title"></el-option>
      </el-select>
      <el-select v-model="query.materialstatus" clearable placeholder="物流状态" class="filter-item" filterable
        style="width: 130px">
        <el-option v-for="item in materialStatusList" :disabled="item.disabled === 0" :value="item.id" :key="item.id"
          :label="item.title"></el-option>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">

        <el-button type="danger" class="filter-item" size="mini" icon="el-icon-refresh" @click="toQuery">刷新</el-button>
        <el-button type="info" class="filter-item" size="mini" icon="el-icon-close" @click="reset">重置</el-button>
      </div>
    </div>
    <!--表单组件-->
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
      <el-table-column prop="id" width="140" label="中奖记录ID">
      </el-table-column>
      <el-table-column prop="uid" width="140" label="用户ID">
      </el-table-column>
      <el-table-column prop="prizeType" label="奖品类型">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.prizeType == 1" style="cursor: pointer">实物</el-tag>
            <el-tag v-if="scope.row.prizeType == 2" style="cursor: pointer">卡券</el-tag>
            <el-tag v-if="scope.row.prizeType == 3" style="cursor: pointer">零钱</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prizeName" width="140" label="奖品名称">
      </el-table-column>
      <el-table-column prop="prizeType" label="领取方式">
        <template slot-scope="scope">
          <div v-if="!scope.row.status">
            暂无
          </div>
          <div v-else>
            {{ scope.row.wayReceiving == 1 ? '邮寄' : '电子兑换' }}
          </div>

        </template>
      </el-table-column>
      <el-table-column label="领取状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? '未领取' : scope.row.status == 1 || scope.row.status == 2 ? '已领取' : '已过期' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="validity" width="160" label="有效时间">
      </el-table-column>
      <el-table-column prop="prizePrice" width="160" label="领取时间">
        <template slot-scope="scope">
          <span>{{ formatTimeTwo(scope.row.collectionTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="prizeNumber" label="物流状态">
        <template slot-scope="scope">
          <div v-if="scope.row.prizeType == 1">
            {{ scope.row.materialStatus == 0 ? '待发货' : scope.row.materialStatus == 1 ? '待收货' : '已完成' }}
          </div>


        </template>
      </el-table-column>

      <el-table-column label="操作" width="165px" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="Look(scope.row)">
            查看</el-button>
          <el-button v-if="scope.row.prizeType == 1 && !scope.row.materialStatus" size="mini" type="primary" @click="Deliver(scope.row.id)">
            去发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <eForm ref="eForm1" />
    <Form ref="eForm2"></Form>
    <!--分页组件-->
    <el-pagination :total="total" :current-page="page + 1" style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />


  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { details } from '@/api/yxSystemPrize'
import eForm from './form'
import Form from './form2'
import { formatTimeTwo, parseTime } from '@/utils/index'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
export default {
  components: { Treeselect, eForm, Form },
  mixins: [initData],
  data() {
    return {
      dropDownValue: '',
      optionsMetaShow: [
        {
          title: "邮寄", id: 1
        },
        {
          title: "电子兑换", id: 3
        },
      ],
      materialStatusList: [
        {
          title: '待发货',
          id: 0,
        },
        {
          title: '待收获',
          id: 1,
        },
        {
          title: '已完成',
          id: 2,
        },
      ],
      query: {
        uid: '',
        wayReceiving: '',
        materialstatus: ''
      },
      delLoading: false,
      visible: false,
      isAttr: false,
      cateId: null,
      businessName: '',
      isLook: false
    }
  },
  created() {
    this.$nextTick(() => {
      if (this.$route.params.id) {
        this.businessName = this.$route.params.name
        this.query.merId = this.$route.params.id
      }
      this.init().then(() => {

      })
    })
  },
  methods: {
    formatTimeTwo, parseTime,
    reset() {
      this.cateId = ''
      this.query.merId = ''
      this.businessName = ''
      this.toQuery()
    },
    Look(item) {
      details(item.id).then(res => {
        this.$refs.eForm2.dialog = true

        this.$refs.eForm2.form = res
        this.$refs.eForm2.form.yxStoreCoupon = item.yxStoreCoupon
        this.$refs.eForm2.form.expressInfo =this.$refs.eForm2.form.expressInfo?res.expressInfo:  {
          data: []
        }
       
      })

    },
    Deliver(id) {
      this.$refs.eForm1.form.id = id
      this.$refs.eForm1.dialog = true
    },
    beforeInit() {
      this.url = 'api/yxSystemWinningRecord'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      return true
    },
  },
  checkPermission,



}
</script>

<style scoped></style>